.container{
    max-width:1000px;
    margin:100px auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
  }
  
  #take{
    position:relative;
    margin:20px 0;
    width:315px;
    height:380px;
    background: #fff;
    transform-style:preserve-3d;
    transform:perspective(2000px);
    transition:1s;
    box-shadow:inset 100px 0 50px rgba(0,0,0,0.5);
  }
  
  #take:hover{
   
    transform:perspective(2000px) rotate(-10deg);
    box-shadow:inset 20px 0 50px rgba(0,0,0,0.5);
  }
  
  #take .img-container{
    position:relative;
    width:100%;
    height:100%;
    border:1px solid #000 1%;
    box-sizing:border-box;
    transform-origin:left;
    z-index:1;
    transition:1s;
    
  }
  
  #take .img-container img{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    object-fit:cover;
  }
  
  #take:hover .img-container{
    transform:rotateY(-135deg);
  }
  
  #take .card-details{
    position:absolute;
    left:0;
    top:0;
    box-sizing:border-box;
    padding:20px;
    color:#000;
  }
  
  #take .card-details h2{
    margin:0;
    padding:0.5em 0;
    text-transform:uppercase;
    font-size:2em;
    color:#ed363a;
  }
  
  #take .card-details p{
    margin:0;
    padding:0;
    line-height:25px;
    font-size:1.1em;
  }